import { browerEnv, ajax } from './utils';
class HandwritingBoard {
    constructor ({
        id,
        name = 'rigeman',
        time = 2000,
        wordCb,
        offset = {
            left: 0,
            top: 0,
        },
    }) {
        this.nama = name;
        this.id = id; // 创建canvas容器的Id;
        this.offset = offset; // 偏移量;
        this.wrap = null; // canvas外层容器dom对象
        this.width = null; // canvas的宽
        this.height = null; // canvas的高
        this.offsetLeft = null;
        this.offsetTop = null;
        this.board = null; // canvas对象
        this.context = null; // canvas上下文对象
        this.path = ''; // 字迹轨迹
        this.timer = null;
        this.time = time; // 停笔后多少秒开始搜索
        this.ending = false; // 是否停笔的标记
        this.loading = false;
        this.wordCb = wordCb;
        this.wordResult = null;
    }
    init () {
        this.wrap = document.querySelector(`${this.id}`);
        let { width, height, x, y } = this.wrap.getBoundingClientRect();
        this.width = width - this.offset.left * 2;
        this.height = height - this.offset.top * 2;
        this.offsetLeft = x + this.offset.left;
        this.offsetTop = y + this.offset.top;
        this.wrap.style['position'] = 'relative';
        this.createCanvas();
        return this;
    }
    createCanvas () {
        this.board = document.createElement('canvas');
        this.board.width = this.width;
        this.board.height = this.height;
        this.board.style['position'] = 'absolute';
        this.board.style['top'] = this.offset.top + 'px';
        this.board.style['left'] = this.offset.left + 'px';
        this.board.style['zIndex'] = '99999';
        this.board.style['backgroundColor'] = '#fff';
        this.wrap.innerHTML = ''
        this.wrap.appendChild(this.board);
        this.context = this.board.getContext('2d');
        this.bindEvent();
    }
    bindEvent () {
        let { android, ios } = browerEnv();
        let { context, board: canvas, width, height, offsetLeft, offsetTop, time } = this;
        if (!android && !ios) {
            canvas.onmousedown = (e) => {
                if (this.loading) {
                    return false;
                }
                this.timer && (clearTimeout(this.timer));
                this.ending = false;
                let ev = e || window.event;
                let x = ev.clientX - offsetLeft;
                let y = ev.clientY - offsetTop;
                context.lineWidth = 5;
                context.strokeStyle = 'red';
                context.beginPath();
                context.moveTo(x, y);
                this.path += `a${x}a${y}a`;
                canvas.onmousemove = (e) => {
                    let ev = e || window.event;
                    let x = ev.clientX - offsetLeft;
                    let y = ev.clientY - offsetTop;
                    if (this.wordResult) {
                        this.wordCb(this.wordResult[0], 'click_word');
                        this.wordResult = null;
                    }
                    context.lineTo(x, y);
                    context.stroke();
                    this.path += `${x}a${y}a`;
                };
                document.onmouseup = () => {
                    canvas.onmousemove = null;
                    document.onmouseup = null;
                    this.ending = true;
                    this.timer = setTimeout(async () => {
                        if (!this.ending) {
                            clearTimeout(this.timer);
                            return false;
                        }
                        context.clearRect(0, 0, width, height);
                        this.loading = true;
                        await this.getWords();
                        this.loading = false;
                        this.path = '';
                    }, time);
                };
            };
        } else {
            canvas.ontouchstart = (e) => {
                if (this.loading) {
                    return false;
                }
                this.timer && (clearTimeout(this.timer));
                this.ending = false;
                let ev = e || window.event;
                let x = ev['touches'][0].clientX - offsetLeft;
                let y = ev['touches'][0].clientY - offsetTop;
                context.beginPath();
                context.moveTo(x, y);
                this.path += `a${x}a${y}a`;
                canvas.ontouchmove = (e) => {
                    let ev = e || window.event;
                    let x = ev['touches'][0].clientX - offsetLeft;
                    let y = ev['touches'][0].clientY - offsetTop;
                    context.lineWidth = 5;
                    context.strokeStyle = 'red';
                    context.lineTo(x, y);
                    context.stroke();
                    this.path += `${x}a${y}a`;
                };
                canvas.ontouchend = () => {
                    canvas.ontouchmove = null;
                    this.ending = true;
                    this.timer = setTimeout(async () => {
                        if (!this.ending) {
                            clearTimeout(this.timer);
                            return false;
                        }
                        context.clearRect(0, 0, width, height);
                        this.loading = true;
                        await this.getWords();
                        this.loading = false;
                        this.path = '';
                    }, time);
                };
            };
        }
    }
    getWords () {
        let { path } = this;
        ajax({
            type: 'POST',
            url: 'https://hw.linpeng.com/',
            data: `type=1&wd=${path}`,
            success: (res) => {
                this.wordCb(res.s, 'preselection_word');
                this.wordResult = res.s;
            },
            error: (err) => {
                console.table(err);
            },
        });
    }
}
export default HandwritingBoard;
